<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { RouterView } from 'vue-router'
import wlsNav from '@/components/common/left-nav.vue'

// 自适应rem B
const flag = ref(false)

// 防止频繁触发
const onWindowResize = () => {
  if (!flag.value) {
    flag.value = true
    setTimeout(() => {
      initFontSize()
      flag.value = false
    }, 300)
  }
}

const initFontSize = () => {
  const view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
  const _html = document.getElementsByTagName('html')[0];
  _html.style.fontSize = 100 * (view_width / 1920) + 'px'
}

onMounted(() => {
  initFontSize()
  window.addEventListener('resize', onWindowResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onWindowResize)
})

// 自适应rem E
</script>

<template>
  <div class="wls">
    <wls-nav />
    <div class="wlsviw">
      <!-- <wls-head />
      <div class="wls-x"> -->
      <RouterView />
      <!-- </div> -->
    </div>
  </div>
</template>

<style scoped>
.wls {
  display: flex;
  height: 100%;
}

.wlsviw {
  width: calc(100% - 1.6rem);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.wls-x {
  width: 100%;
  height: calc(100% - .5rem);
  position: relative;
}
</style>
